<script setup lang="ts">
import { ref } from 'vue';
</script>

<template>
  <page class="page" custom-overflow="visible">
    <page-template pageBgColor="#FFED46" footerBtnTitle="返回首页">
      <view class="head"></view>
      <view class="banner-box">
        <view class="banner-content">
          <view class="banner-item" v-for="item in 6" :key="item">
            <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/series-image-three.png" mode="aspectFill"></image>
            <view class="banner-item-title text-ellipse">iPhone 15 Pro Max</view>
            <view class="banner-item-price">
              <price-box num="15.24" color="#FFFFFF"></price-box>
              <view class="banner-item-price-text">租</view>
            </view>
          </view>
        </view>
      </view>
      <view class="series-wrap-one">
        <view class="series-head">安卓旗舰立减600</view>
        <view class="series-two">
          <view class="series-two-item" v-for="item in 2" :key="item">
            <view class="series-mark-box">
              <mark-tips bgColor="linear-gradient( 180deg, #FD2121 0%, #FFD768 100%)"></mark-tips>
              <view class="series-desc">A17 Pro，芯的颠覆</view>
            </view>
            <view class="series-title text-ellipse">iPhone 15 Pro Max</view>
            <view class="series-img-box">
              <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/series-image-three.png" mode="aspectFill"></image>
              <view class="discount-price">
                <view>立减</view>
                <view>￥600</view>
              </view>
            </view>
            <view class="series-price-box">
              <price-box num="15.24" color="#FFF700"></price-box>
              <view class="series-price-text">立即抢租</view>
            </view>
          </view>
        </view>
        <view class="series-three">
          <view class="series-three-item" v-for="item in 3" :key="item">
            <view class="series-three-item-box">
              <view class="img-box">
                <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/series-image-three.png" mode="aspectFill"></image>
                <mark-tips class="mark" bgColor="linear-gradient( 180deg, #FD2121 0%, #FFD768 100%)"></mark-tips>
              </view>
              <view class="series-three-title text-ellipse">iPhone 15 Pro Max</view>
              <view class="series-three-bottom"> 
                <view class="series-three-discount">立减￥600</view>
                <view class="price-wrap">
                  <price-box num="15.24" color="#FFF700"></price-box>
                  <view class="price-text">租</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="series-wrap-two"> 
        <view class="series-head">安卓旗舰立减600</view>
        <view class="series-three" v-for="item in 2" :key="item">
          <view class="series-three-item" v-for="item in 3" :key="item">
            <view class="series-three-item-box">
              <view class="img-box">
                <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/series-image-three.png" mode="aspectFill"></image>
                <mark-tips class="mark" bgColor="linear-gradient( 180deg, #FD2121 0%, #FFD768 100%)"></mark-tips>
              </view>
              <view class="series-three-title text-ellipse">iPhone 15 Pro Max</view>
              <view class="series-three-bottom"> 
                <view class="series-three-discount">立减￥600</view>
                <view class="price-wrap">
                  <price-box num="15.24" color="#FFF700"></price-box>
                  <view class="price-text">租</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="series-wrap-three">
        <view class="series-head">安卓旗舰立减600</view>
        <view class="series-mix">
          <view class="series-mix-left">
            <view class="img-box">
              <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/series-image-three.png" mode="aspectFill"></image>
               <view class="discount-price" style="right: -37rpx;">
                <view>立减</view>
                <view>￥600</view>
              </view>
            </view>
            <view class="title text-ellipse">iPhone 14 Pro Max</view>
            <view class="series-mix-bottom">
              <price-box num="15.24" color="#FFFFFF"></price-box>
            </view>
          </view>
          <view class="series-mix-right">
            <view class="series-mix-item" v-for="item in 4" :key="item"> 
              <view class="series-mix-item-box">
                <view class="img-box">
                  <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/series-image-three.png" mode="aspectFill"></image>
                  <view class="series-mix-discount">立减￥600</view>
                </view>
                <view class="series-mix-mark">
                  <mark-tips bgColor="linear-gradient( 180deg, #FD2121 0%, #FFD768 100%)"></mark-tips>
                  <view class="series-mix-item-title text-ellipse">iPhone 14 Pro</view>
                </view>
                <view class="series-mix-bottom">
                  <price-box num="15.24" color="#FFFFFF"></price-box>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="series-wrap-four">
        <view class="series-head">安卓旗舰立减600</view> 
        <view class="series-three">
          <view class="series-three-item" v-for="item in 3" :key="item">
            <view class="series-three-item-box">
              <view class="img-box">
                <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/series-image-three.png" mode="aspectFill"></image>
                <mark-tips class="mark" bgColor="linear-gradient( 180deg, #FD2121 0%, #FFD768 100%)"></mark-tips>
              </view>
              <view class="series-three-title text-ellipse">iPhone 15 Pro Max</view>
              <view class="series-three-bottom"> 
                <view class="series-three-discount">立减￥600</view>
                <view class="price-wrap">
                  <price-box num="15.24" color="#FFF700"></price-box>
                  <view class="price-text">租</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="series-four">
          <view class="series-four-item" v-for="item in 4" :key="item">
            <view class="img-box">
              <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/series-image-three.png" mode="aspectFill"></image>
              <view class="series-four-discount">立减￥600</view>
            </view>
            <view class="series-four-title text-ellipse">iPhone 13 Pro</view>
            <price-box num="15.24" color="#FF1717"></price-box>
          </view>
        </view>
      </view>
    </page-template>
  </page>
</template>
<style lang="scss" scoped>
.page{
  overflow: hidden;
}
.head{
  margin-right:-20rpx;
  margin-left: -20rpx;
  height: 230rpx;
  background: url(https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/android-head.png) no-repeat center center/100% 100%;
}
.banner{
  &-box{
    margin-right: -20rpx;
    width: calc(100% + 20rpx);
    height: 350rpx;
    overflow: hidden;
    }
  &-content{ 
    padding: 84rpx 96rpx 16rpx 20rpx;
    width: 806rpx;
    height: 100%;
    overflow-x: scroll;
    display:flex;
    background: url(https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/android-banner.png) no-repeat center center/100% 100%;
  }
  &-item{
    flex-shrink: 0;
    margin-right: 14rpx;
    width: 210rpx;
    height: 250rpx;
    padding-top:14rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/android-goods-bg.png) no-repeat center center/100% 100%;
    &:last-child{
      margin-right: 0;
    }
    image{
      width: 128rpx;
      height: 148rpx;
    }
    &-title{
      margin-top: 8rpx;
      width: 180rpx;
      padding: 0 10rpx;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      font-size: 20rpx;
      color: #000000;
      line-height: 27rpx;
    }
    &-price{
      width: 100%;
      height: 50rpx;
      padding-right: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10rpx;
      &-text{
        font-family: Alibaba PuHuiTi;
        font-weight: bold;
        font-size: 34rpx;
        color: #FF1717;
        line-height: 47rpx;
        text-align: left;
      }
    }
  }
} 

.series{
  &-wrap-one, &-wrap-two, &-wrap-four{
    margin-top: 20rpx;
    padding: 20rpx 12rpx;
  }
  &-wrap-one{
      background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/android-series-1.png') no-repeat center center/100% 100%;
  }
  &-wrap-two{
    background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/android-series-2.png') no-repeat center center/100% 100%;
  }
  &-wrap-three{
    padding: 20rpx 8rpx;
    background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/android-series-3.png') no-repeat center center/100% 100%;
  }
  &-wrap-four{
    margin-bottom: 20rpx;
    background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/android-series-4.png') no-repeat center center/100% 100%;
  }
  &-head{
    margin-bottom: 32rpx;
    font-family: Source-KeynoteartHans;
    font-weight: 800;
    font-size: 50rpx;
    font-style: italic;
    color: #000000;
    line-height: 70rpx;
    text-align: center;
    &-left{
      display: flex;
      align-items: center;
    }
  }
  &-two{
    display: flex;
    &-item{
      margin-right: 10rpx;
      width: calc(50% - 5rpx);
      padding: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #FFFFFF;
      border-radius: 20rpx;
      &:last-child{
        margin-right: 0;
      }
    }
  }
  &-three{
    margin-top: 10rpx;
    display: flex;
    &-item{
      margin-right: 10rpx;
      width: calc((100% - 20rpx) / 3);
      padding: 8rpx 6rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      &-box{
        padding: 16rpx 8rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: linear-gradient( 0deg, #FFECEC 0%, #FFFFFF 100%);
        border-radius: 20rpx;
      }
      .img-box{
        position: relative;
        image{
          width: 110rpx;
          height: 147rpx;
        }
        .mark{
          position: absolute;
          top: -10rpx;
          left: -40rpx;
        }
      }
    }
    &-title{
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      font-size: 21rpx;
      color: #000000;
      line-height: 29rpx;
    }
    &-bottom{
      margin-top: 12rpx;
      width: 100%; 
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .price-wrap{
        width: 100%;
        height: 52rpx;
        padding-left: 4rpx;
        padding-right: 16rpx;
        line-height: 52rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #F42C53;
        box-shadow: inset 0rpx 0rpx 20rpx 1rpx #FFFFFF;
        border-radius: 26rpx 0rpx 26rpx 26rpx;
        .price-text{
          padding-left: 10rpx;
          position: relative;
          font-family: HelloFont WenYiHei, HelloFont WenYiHei;
          font-weight: 800;
          font-size: 30rpx;
          color: #FFFFFF;
          line-height: 43rpx;
          &:after{
            content: '';
            position: absolute;
            top: 8rpx;
            bottom: 8rpx;
            left: 0;
            width: 1rpx;
            background: #FFFFFF;
          }
        }
      }
    }
    &-discount{
      padding: 0 10rpx;
      height: 29rpx;
      line-height: 29rpx;
      background: linear-gradient( 180deg, #FF0909 0%, #FF542D 100%);
      border-radius: 15rpx 15rpx 0rpx 15rpx;
      font-family: Source-KeynoteartHans;
      font-weight: 800;
      font-size: 20rpx;
      color: #FFFFFF;
    }
  }
  &-mix{
    display: flex;
    &-left{
      flex-shrink: 0;
      width: 240rpx;
      padding: 20rpx 12rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      .img-box{
        position: relative;
        image{
          width: 140rpx;
          height: 256rpx;
        }
      }
      .title{
        margin: 20rpx 0;
        font-family: Alimama ShuHeiTi;
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;
        line-height: 34rpx;
      }
    }
    &-right{
      flex: 1;
      display: flex;
      flex-wrap: wrap;
    }
    &-item{
      width: calc((100% - 10rpx) / 2);
      margin-right: 10rpx;
      margin-bottom: 10rpx;
      padding: 8rpx 6rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      &:nth-child(2n){
        margin-right: 0;
      }
      &:nth-child(3), &:nth-child(4){
        margin-bottom: 0;
      }
      &-box{
        display: flex;
        flex-direction: column;
        align-items: center;
        background: linear-gradient( 0deg, #FFECEC 0%, #FFFFFF 100%);
        border-radius: 20rpx;
        .img-box{
          position: relative;
          image{
            width: 100rpx;
            height: 120rpx;
          }
        }
      }
      &-title{
        margin-left: 5rpx;
        font-family: PingFang SC;
        font-weight: 800;
        font-size: 21rpx;
        color: #000000;
        line-height: 29rpx;
      }
    }
    &-discount{
      width: 120rpx;
      height: 32rpx;
      position: absolute;
      left: -10rpx;
      bottom: 0rpx;
      line-height: 32rpx;
      background: linear-gradient( 180deg, #FF0909 0%, #FF542D 100%);
      border-radius: 15rpx;
      font-family: Source-KeynoteartHans;
      font-weight: 600;
      font-size: 20rpx;
      color: #FFFFFF;
      text-align: center;
    }
    &-mark{
      margin: 8rpx 0;
      padding: 0 10rpx;
      display: flex;
      align-items: center;

    }
    &-bottom{
      width: 210rpx;
      height:  52rpx;
      background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/android-price.png') no-repeat center center/100% 100%;
    }
  }
  &-four{
    margin-top: 15rpx;
    display: flex;
    &-item{
      width: calc((100% - 30rpx) / 4);
      margin-right: 10rpx;
      padding: 16rpx 16rpx 8rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #FFFFFF;
      border-radius: 20rpx;
      .img-box{
        position: relative;
        image{
          width: 96rpx;
          height: 110rpx;
        }
      }
    }
    &-discount{
      width: 120rpx;
      height: 32rpx;
      position: absolute;
      left: -10rpx;
      bottom: 0rpx;
      line-height: 32rpx;
      background: linear-gradient( 180deg, #FF0909 0%, #FF542D 100%);
      border-radius: 15rpx;
      font-family: Source-KeynoteartHans;
      font-weight: 600;
      font-size: 20rpx;
      color: #FFFFFF;
      text-align: center;
    }
    &-title{
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 20rpx;
      color: #000000;
      line-height: 28rpx;
    }
  }
  &-mark{
    &-box{
      display: flex;
    }
  }
  &-desc{
    margin-left: 8rpx;
    margin-bottom: 10rpx;
    font-family: PingFang SC; 
    font-size: 20rpx;
    color: #000000;
    line-height: 28rpx;
  }
  &-title{
    font-family: Alimama ShuHeiTi;
    font-weight: bold;
    font-size: 31rpx;
    color: #000000;
    line-height: 43rpx;
  }
  &-img{
    &-box{
      width: 100%;
      margin-top: 10rpx;
      display: flex;
      justify-content: center;
      position: relative;
      image{
        width: 120rpx; 
        height: 160rpx;
      }
    }
  }
  &-price{
    &-box{
      margin-top: 16rpx;
      width: 100%;
      height: 56rpx;
      padding-left: 10rpx;
      padding-right: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #F42C53;
      box-shadow: inset 0rpx 0rpx 20rpx 1rpx #FFFFFF;
      border-radius: 30rpx;
    }
    &-text{
      font-family: HelloFont WenYiHei;
      font-weight: 800;
      font-size: 32rpx;
      color: #FFFFFF;
      line-height: 56rpx;
    }
  }
}
.discount-price{
  position: absolute;
  bottom: 10rpx;
  right: 0rpx;
  width: 82rpx;
  height: 94rpx;
  padding-top: 12rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/android-discount.png') no-repeat center center/100% 100%;
  font-family: Source-KeynoteartHans, Source-KeynoteartHans;
  font-weight: 800;
  font-size: 24rpx;
  color: #FFFFFF;
  line-height: 34rpx;
  text-shadow: 0px 3px 20px #FF0000;
}
</style>

